<template>
	<view>
		<!-- 导航栏 -->
		<view>
			<uni-nav-bar class="nav" color="white" left-icon="back" left-text="返回" title="等待考试开始"
				backgroundColor="#007AFF" @clickLeft="back()">
			</uni-nav-bar>
		</view>
		<!-- 弹出框 -->
		<view>
			<l-modal ref="customModal" :isShowModal="isShowModal" @onClickConfirm="confirm" @onClickCancel="cancel">
				<!-- modalTitle="温馨提示" -->
				<template>
					<p style="text-align: center;">您确定要离开吗？</p>
				</template>
			</l-modal>
		</view>
		<view class="all">
			<!-- 考试信息 -->
			<view class="test-info">
				<view class="test-left-nothing"></view>
				<view class="test-info-all">
					<view class="test-info-1">
						<!-- 考试名称 -->
						<view style="height: 18rpx;"></view>
						{{testMsg.testName}}
					</view>
					<!-- 考试时间 -->
					<view class="test-info-2">
						<view>考试时间：</view>
						<view class="test-info-2-2"></view>
						<view>{{testMsg.testTime}}</view>
					</view>
					<!-- 考试班级 -->
					<view class="test-info-2">
						<view>考试班级：</view>
						<view class="test-info-2-2"></view>
						<view>{{testMsg.testClass}}</view>
					</view>
					<!-- 考试信息 -->
					<view class="test-info-2">
						<view>考试信息：</view>
						<view class="test-info-2-2"></view>
						<view>
							{{testMsg.paperMsg.choiceNum}}道选择题、{{testMsg.paperMsg.judgeNum}}道判断题、{{testMsg.paperMsg.fillNum}}道填空题、{{testMsg.paperMsg.shortAnswerNum}}道简答题
						</view>
					</view>
					<view class="test-info-else">总分：100分</view>
				</view>
			</view>
			<!-- 考试信息隔离条 -->
			<view>
				<hr style="border: 0.01px solid #DCDCDC;" />
			</view>
			<!-- 头像区域 -->
			<view class="test-info-img">
				<image class="test-info-img" src="../../static/icons/test.png"></image>
			</view>
			<!-- 考试时间区 -->
			<view class="test-info-timebar">
				<view class="test-info-timebar-1"></view>
				<view class="test-info-timebar-2">
					<view class="test-info-timebar-2-1">
						<button class="button" @click="accessTest" :disabled="disabled">
							{{ content }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		filetestRoom,
		getTestInformationsByTestidAndStudentid
	} from '../../api/file.js'

	export default {
		data() {
			return {
				testMsg: {},
				content: '距离考试还有', // 按钮里显示的内容
				startTime: "", //考试开始时间
				disabled: true, //按钮禁用
				code: '',
				studentNum: '',
				testid: '', //pyw新增
				isShowModal: false,
				path: '/pages/login/login',
				hours: 0,
				minutes: 0,
				seconds: 0,
				token: uni.getStorageSync('token'),
			}
		},
		created() {
			this.getMsg();
		},
		methods: {
			accessTest() {
				getTestInformationsByTestidAndStudentid({
										token: this.token,
										testid: this.testid,
										studentid: this.studentNum
									})
									.then(res => {
										//console.log("studentid", this.studentNum, "PYW:", res);
										if (res.data.data.isCommited === true) {
											uni.showToast({
												title: "你已提交试卷,不能再次参加考试",
												icon: 'none',
												duration: 2000
											})
										} else {
											this.getQuestions(); //获取考试信息
											//计算考试剩余时间
											var hour = 1 - Number(this.hours)
											var minute = 40 - Number(this.minutes)
											var second = 0 - Number(this.seconds)
											if (second < 0) {
												minute--
												second += 60
												if (minute < 0) {
													hour--
													minute += 60
												}
											}
											uni.setStorageSync('minute', minute);
											uni.setStorageSync('hour', hour);
											uni.setStorageSync('second', second);
											uni.navigateTo({
												url: "../testing/testing"
											})
										}
									})
				//计算考试剩余时间
				// var hour = 1 - Number(this.hours)
				// var minute = 40 - Number(this.minutes)
				// var second = 0 - Number(this.seconds)
				// if (second < 0) {
				// 	minute--
				// 	second += 60
				// 	if (minute < 0) {
				// 		hour--
				// 		minute += 60
				// 	}
				// }
				// uni.setStorageSync('minute', minute);
				// uni.setStorageSync('hour', hour);
				// uni.setStorageSync('second', second);
				// uni.navigateTo({
				// 	url: "../testing/testing"
				// })
			},
			getQuestions() { //获取考试题目信息，保存到vuex的公共仓库中
				this.$store.dispatch("getQuestions", {
					paperId: this.testMsg.paperMsg.paperid,
					token: this.token
				});
				// console.log("this.$store.state.questions:", this.$store.state.questions);
			},
			getMsg() {
				const testCode = uni.getStorageSync("testCode");
				this.testid = testCode; //pyw新增
				const studentNum = uni.getStorageSync("studentNum");
				this.studentNum = studentNum;
				//console.log("studnetNum", this.studentNum);
				const msg = {
					studentNum,
					testCode
				};
				//console.log("testRoom传输到的信息:", msg);
				filetestRoom(msg).then(res => {
					//console.log("testRoom接受到的考试界面信息:", res);
					this.testMsg = res.data.data.testMsg; //将获取的考试信息保存到testMsg里
					uni.setStorageSync("paperId", this.testMsg.paperMsg.paperid)
					uni.setStorageSync("count", this.testMsg.paperMsg.choiceNum + this.testMsg.paperMsg.judgeNum +
						this.testMsg.paperMsg.fillNum)
					//console.log(this.testMsg);
					//console.log("paperId", this.testMsg.paperMsg.paperid)
					this.startTime = this.testMsg.testTime.slice(0, 16);
					//console.log("开始时间：", this.startTime);
					this.getTime();
				})
			},
			back() {
				this.isShowModal = true
			},
			cancel() {
				this.isShowModal = false
			},
			confirm() {
				this.isShowModal = false;
				this.$router.push(this.path)
			},
			getTime() {
				//定义flag判断date3值的正负
				var flag = 0
				var date = new Date();
				var seperator1 = "-";
				var year1 = date.getFullYear();
				var month1 = date.getMonth() + 1;
				var hour1 = date.getHours();
				var minutes1 = date.getMinutes();
				var seconds1 = date.getSeconds();
				var strDate = date.getDate();
				if (month1 >= 1 && month1 <= 9) {
					month1 = "0" + month1;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentTime = year1 + seperator1 + month1 + seperator1 + strDate + "  " + hour1 + ":" + minutes1 +
					":" +
					seconds1;
				var date1 = new Date(currentTime); //当前时间
				//console.log('考试开始时间:', this.startTime)
				var date2 = new Date(this.startTime); //考试开始时间
				var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				// console.log("data3:", date3)
				// console.log("data1", date1)
				// console.log("data2", date2)
				if (date3 < 0) {
					flag = 1
					date3 = date1.getTime() - date2.getTime();
				}
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));

				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);

				this.canClick = false
				if (flag == 0) {
					console.log(" 用时： " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
					this.content = '距离考试开始' + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
					let clock = window.setInterval(() => {
						seconds--
						this.content = '距离考试开始' + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
						if (seconds == 0 && (minutes - 1 > 0 || hours - 1 > 0 || days - 1 > 0)) {
							minutes--
							seconds = 60
							if (minutes < 0 && (hours - 1 >= 0 || days - 1 > 0)) {
								hours--
								minutes = 59
								if (hours == 0 && days - 1 >= 0) {
									days--
									hours = 23
								}
							}
						}
						if (seconds < 0) {
							window.clearInterval(clock)
							this.content = '开始考试'
							this.disabled = false
						}
					}, 1000)
				} else if (flag == 1) {
					console.log(" 用时： " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
					let clock = window.setInterval(() => {
						seconds++
						this.seconds = seconds
						this.hours = hours
						this.minutes = minutes
						if (seconds == 60) {
							minutes++
							seconds = 0
							if (minutes == 60) {
								hours++
								minutes = 0
								if (hours == 24) {
									days++
									hours = 0
								}
			  		}
						}
						if (days > 0 || hours >= 2 || hours >= 1 && minutes > 40) {
							window.clearInterval(clock)
							this.content = '抱歉<_>，考试时间已过'
						} else {
							window.clearInterval(clock)
							this.content = '开始考试'
							this.disabled = false
						}

					}, 1000)
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.nav {
		background-color: #007AFF;
		font-size: 200px;
	}

	/* 在这里对自定义的导航栏调整样式无效果，只能在便签里才能有效果 */
	.all {
		/* background-color: #F1F1F1;
	height: 100%;
	w */
		width: 100%;
	}

	.test-info {
		height: 250rpx;
		width: 100%;
		/* background-color: #4CD964; */
		display: flex;
	}

	.test-info-all {
		height: 100%;
		width: 94%;
	}

	.test-info-1 {
		height: 60rpx;
		width: 100%;
		/* background-color: #8F8F94; */
	}

	.test-info-2 {
		height: 45rpx;
		width: 100%;
		/* background-color: #DD524D; */
		color: #999999;
		font-size: 14rpx;
		display: flex;
	}

	.test-info-2-2 {
		width: 2rpx;
		height: 100%;
	}

	.test-info-else {
		font-size: 12rpx;
		color: #999999;
		height: 37rpx;
	}

	.test-left-nothing {
		width: 6%;
		height: 95%;
		/* background-color: #007AFF; */
	}

	.hrcss {
		border: 50rpx;
	}

	.title {}

	.test-info-img {
		height: 620rpx;
		width: 100%;
		background-color: #4CD964;
	}

	.test-info-timebar-1 {
		height: 100rpx;
		width: 100%;
		/* background-color: #007AFF; */
	}

	.test-info-timebar-2 {
		height: 80rpx;
		width: 100%;
		/* background-color: #DD524D; */
	}

	.test-info-timebar-2-1 {
		/* position: absolute; */
		margin: auto;
		height: 100%;
		width: 90%;
		background-color: rgba(236, 240, 241, 1);
		text-align: center;

	}

	.test-info-timebar-2-1-1 {
		padding-top: 15rpx;
		text-align: center;
		background-color: rgba(236, 240, 241, 1);
	}
</style>
